<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>

</table>
<script>
    //如何定义一个空的Person对象
    function Person() {}
    //实例化一个Person对象
    let p1=new Person()
    //添加属性
    p1.name="月半"
    p1.age=18
    //添加动态方法
    p1.run=function () {
        console.log("我叫"+this.name+"今年"+this.age)
    }
    //调用方法
    p1.run()

    //直接实例化对象
    let p2={}
    p2.name ="李白"
    p2.age=36
    p2.run=function () {
        console.log("李白的方法执行了")
    }
    p2.run()

    //实例化自带属性和方法的对象
    let p3={
        name:"刘备",
        age:16,
        run:function () {
            alert(this.name+":"+this.age)
        }
    }
    p3.run()


    //通过定义对象封装数据
    let arr=[{name:"小米手机",price:"3000",count:500},
        {name:"小米电视",price:"5200",count:800},
        {name:"华为手机",price:"8000",count:5000},
        {name:"华为手机",price:"2000",count:100}]
    //把数组中商品信息展示到页面中
    for (let item of arr) {
        let tr=document.createElement("tr")
        let nameTD=document.createElement("td")
        let priceTD=document.createElement("td")
        let countTD=document.createElement("td")
        nameTD.innerText=item.name
        priceTD.innerText=item.price
        countTD.innerText=item.count
        tr.append(nameTD,priceTD,countTD)
        let table=document.querySelector("table")
        table.append(tr)
    }



</script>

</body>
</html>